<template>
  <div class="common-layout">
    <el-container class="flex">
      <el-main>
        <div class="left">
          <div
            class="member"
            :class="{'member-active':index==memberIndex}"
            v-for="item,index in lefts"
            ref="members"
            @click="memberIndex=index"
          >
            <p class="name">{{item.name}}</p>
            <p class="grade">{{item.score}}</p>
          </div>
        </div>
        <div class="center">
          <h1 class="title">知识竞赛</h1>
          
          <div class="questions">
            <p
              class="question-context"
              style="padding:30px 30px 0 30px;height:15%"
            >
              {{questions[questionIndex].questionContext}}
              
            </p>
            <p
              class="question-answer"
              style="padding:0 30px 30px 30px;height:70%"
            >
              <button
                ref="btns"
                class="answer"
                :class="{'answer-active':selectIndex==index}"
                v-for="item,index in questions[questionIndex].questionAnswers"
                @click="selectIndex=index"
              >{{String.fromCharCode(index+65)}}.{{item}}</button>
            </p>
            <p style="position:absolute;right:30px;bottom:10px;color: #ffff;">
              当前题号:{{questionIndex}}</p>
          </div>
          <div class="buttons">
            <el-button
              type="primary"
              @click="questionIndex=(questionIndex+questions.length-1)%(questions.length)"
            >上一题</el-button>
            <el-button
              type="primary"
              @click="questionIndex=(questionIndex+1)%(questions.length)"
            >下一题</el-button>
            <el-button
              type="primary"
              @click="check"
            >答案</el-button>
            <el-button
              type="primary"
              @click="timing"
            >计时</el-button>
            <el-button
              type="primary"
              @click="jump"
            >成绩</el-button>
          </div>
          <div
            class="time"
            v-show="isTime"
          >
            {{time}}
          </div>
        </div>
        <div class="right">
          <div
            class="member"
            v-for="item,index in rights"
            ref="members"
            :class="{'member-active':index+4==memberIndex}"
            @click="memberIndex=index+4"
          >
            <p class="name">{{item.name}}</p>
            <p class="grade">{{item.score}}</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
  
  <script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' // 引入useStore 方法
export default {
  name: "LayOut",
  setup () {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      isTime: false,//是否开启计时
      time: 10,//倒计时间
      isShowCorrect: false,//显示答案
      questionIndex: 0,//当前题号
      selectIndex:-1,//选择的选项位置
      memberIndex: -1,//当前成员
      lefts: store.state.memberInfo.slice(0, 4),
      rights: store.state.memberInfo.slice(4),
      questions: [
        {
          questionContext: '在 css 选择器当中,优先级排序正确的是',
          questionAnswers: ['id选择器>标签选择器>类选择器', '标签选择器>类选择器>id选择器', '类选择器>标签选择器>id选择器', 'id选择器>类选择器>标签选择器'],
          correctIndex: 3
        },
        {
          questionContext: '关于HTML语义化,以下哪个说法是正确的',
          questionAnswers: ['语义化的HTML有利于机器的阅读,如PDA手持设备、搜索引擎爬虫;但不利于人的阅读', 'Table 属于过时的标签,遇到数据列表时,需尽量使用 div 来模拟表格', '语义化是HTML5带来的新概念,此前版本的HTML无法做到语义化', 'header、article、address都属于语义化明确的标签'],
          correctIndex: 3
        },
        {
          questionContext: '下面不属于ECMAScript规范的范围的是',
          questionAnswers: ['数据类型', '语法', 'DOM事件', '内置对象和函数的标准库'],
          correctIndex: 2
        }
      ]
    })
    let interval;
    //倒计时
    const timing = () => {
      data.isTime = !data.isTime;
      if (data.isTime) {
        interval = setInterval(() => {
          if (data.time == 0) {
            clearInterval(interval);
            return;
          }
          data.time--;
        }, 1000);
      } else {
        data.time = 10;
        clearInterval(interval);
      }
    }
    //获取选项dom,改变样式
    let btns = ref(null);
    const check = () => {
      let correctIndex = data.questions[data.questionIndex].correctIndex;//正确答案
      let score;
            switch (store.state.rushIndex) {
            case 0: score = 10;break;
            case 1: score = 20;break;
            case 2: score = 30;break;
            default: score = 0;break;
          }
      data.isShowCorrect = !data.isShowCorrect;
      if (data.isShowCorrect&&data.selectIndex==correctIndex) {//回答正确
        btns.value[correctIndex].style.color = "green";
        data.selectIndex=-1;
        if(store.state.ruleIndex==0||store.state.ruleIndex==1){        //必答、抢答
          store.commit('addScore',[data.memberIndex,10]);
        }else{   //风险
           store.commit('addScore',[data.memberIndex,score]);
        } 
      }else if(data.isShowCorrect){
         btns.value[correctIndex].style.color = "red";//回答错误
         if(store.state.ruleIndex==0||store.state.ruleIndex==1){        //必答、抢答
          store.commit('subScore',[data.memberIndex,10]);
        }else{   //风险
           store.commit('subScore',[data.memberIndex,score]);
        } 
      } 
      else {
        btns.value[correctIndex].style.color = "";
      }
      // console.log(btns.offsetWidth);
    }
    const jump = () => {
      router.push('/order');
    }
    const test = () => { };//测试
    // let members = ref(null);
    // onMounted(()=>{
    //  members.value[data.memberIndex].style="box-shadow:0 0 10px red"
    // })
    const prev = () =>{
      
    }
    const next = () =>{

    }
    return {
      ...toRefs(data),
      timing,
      btns,
      check,
      test,
      jump,
      // members
    }
  }
}
  </script>
  
  <style scoped>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url("../../assets/background.jpg");
  background-size: 100% 100%;
  object-fit: cover;
}
.el-main {
  width: 1500px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: none;
  overflow: hidden;
  --el-main-padding: 40px;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 70%;
  width: 20%;
}
.center {
  position: relative;
  height: 100%;
  width: 50%;
  box-shadow: 0 0 2px #f3eaead5;
}
.member {
  color: #ffff;
  width: 150px;
  height: 100px;
  border-radius: 8px;
  cursor: pointer;
}
.member-active {
  box-shadow: 0 0 10px red;
}
.name {
  background: cadetblue;
  width: 100%;
  height: 50%;
  line-height: 50px;
  float: left;
  border-radius: 8px 0 0 0;
}
.grade {
  background: rgb(163, 213, 248);
  width: 100%;
  height: 50%;
  line-height: 50px;
  float: left;
}
.title {
  position: relative;
  top: -40px;
}
.questions {
  position: relative;
  height: 65%;
  width: 80%;
  background: rgb(215, 215, 215, 0.6);
  margin: auto;
}
.time {
  position: relative;
  bottom: -40px;
  height: 100px;
  line-height: 100px;
  width: 100px;
  margin: auto;
  background: rgb(215, 215, 215, 0.6);
  border-radius: 50%;
  color: red;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 30px;
}
.question-context,
.answer {
  text-align: left;
}
.answer-active{
  color: #409eff;
}
.question-answer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.question-answer button {
  cursor: pointer;
  border: none;
  background: none;
}
</style>